import React, { FC, useState, useEffect, useRef, useCallback, Component } from 'react'
import * as echarts from 'echarts'
// interface Props extends ReduxProps {}
let myChart:any
const UnitDif: FC = Props => {
	const echartsDom :any= useRef()
	useEffect(() => {
		myChart = echarts.init(echartsDom.current)
		// console.log(echartsDom.current);
		window.addEventListener('resize', function () {
			// console.log(123);
			myChart.resize()
		})
		const dataA = [20, 30, 10, 40, 55]
		const dataB = [33, 22, 44, 66, 11]
		const option = {
			legend: {
				right: '10%',
				data: ['2015', '2016'],
			},
			grid: {
				top: '20%',
			},
			tooltip: {},
			xAxis: {
				type: 'category',
				data: ['1', '22', '33', '55', '44'],
				axisLine: {
					lineStyle: {
						color: ' #E5E5E5',
					},
				},
				axisLabel: {
					color: '#888',
				},
			},
			yAxis: {
				name: '单位:亿元',
				nameGap: '30',
				nameTextStyle: {
					color: '#888',
				},
				axisLabel: {
					color: '#888',
				},
				axisLine: {
					lineStyle: {
						color: '#E5E5E5',
					},
				},
				splitLine: {
					//   show: false,
					lineStyle: {
						color: ' #E5E5E5',
					},
				},
			},
			// Declare several bar series, each will be mapped
			// to a column of dataset.source by default.
			series: [
				{
					type: 'bar',
					barWidth: 10,
					name: '2015',
					itemStyle: {
						color: '#04a68a',
					},
					label: {
						show: true,
						position: 'top',
					},
					data: dataA.map(item => ({
						value: item,
						name: '2015',
					})),
				},
				{
					type: 'bar',
					barWidth: 10,
					name: '2016',
					label: {
						show: true,
						position: 'top',
					},
					itemStyle: {
						color: '#ff5146',
					},
					data: dataB.map(item => ({
						value: item,
						name: '2016',
					})),
				},
			],
		}

		option && myChart.setOption(option)
		return () => {
			window.removeEventListener('resize', function () {
				myChart.resize()
			})
		}
	}, [])
	return <div className='Unit_echarts' ref={echartsDom}></div>
}
export default UnitDif
